<template>
  <div class="refundAddMoneyContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title">
          退费
          <div class="close" @click="cancel()"></div>
        </div>
        <div class="confirm_box">
          <el-row :gutter="10" class="confirm_info">
            <el-col :span="6">学员姓名：赵乐乐</el-col>
            <el-col :span="6">监护人：罗琴</el-col>
            <el-col :span="8">联系电话：18000000000</el-col>
          </el-row>
          <div class="confirm_payInfo">
            <div class="confirm_payInfo_table">
              <div class="table">
                <div class="thead">
                  <div style="width: 1.2rem;">退费项目</div>
                  <div style="width: 1.5rem;">收费标准</div>
                  <div style="width: 1.3rem;">购买月数</div>
                  <div style="width: 1.2rem;">应收总计</div>
                  <div style="width: 1.2rem;">折扣</div>
                  <div style="width: 1.2rem;">实际收款</div>
                  <div style="width: 1.2rem;">符合退款(天)</div>
                  <div style="width: 1.2rem;">应退费</div>
                  <div style="width: 1.2rem;">实际退费</div>
                </div>
                <div class="tr_div">
                  <div class="tr">
                    <div style="width: 1.2rem;">学费</div>
                    <div style="width: 1.5rem;">标准【2000/月】</div>
                    <div style="width: 1.3rem;">1</div>
                    <div style="width: 1.2rem;">￥2200.00</div>
                    <div style="width: 1.2rem;">无</div>
                    <div style="width: 1.2rem;">￥2000.00</div>
                    <div style="width: 1.2rem;">10</div>
                    <div style="width: 1.2rem;">￥1000.00</div>
                    <div style="width: 1.2rem;">
                      ￥2000.00
                      <i class="el-icon-edit nameEdit"></i>
                    </div>
                  </div>
                  <div class="tr">
                    <div style="width: 1.2rem;">餐费</div>
                    <div style="width: 1.5rem;">标准【200/月】</div>
                    <div style="width: 1.3rem;">1</div>
                    <div style="width: 1.2rem;">￥440.00</div>
                    <div style="width: 1.2rem;">无</div>
                    <div style="width: 1.2rem;">￥440.00</div>
                    <div style="width: 1.2rem;" class="no_work">考勤未提交</div>
                    <div style="width: 1.2rem;">￥200.00</div>
                    <div style="width: 1.2rem;">
                      ￥200.00
                      <i class="el-icon-edit nameEdit"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pay_type">
              <el-row :gutter="10" class="from_row">
                <div class="key">实际退费：</div>
                <div class="value">
                  ￥
                  <el-input style="width:1.2rem;" clearable v-model="value" placeholder="退费金额"></el-input>
                </div>
              </el-row>
              <el-row :gutter="10" class="from_row">
                <div class="key" style="padding-top:0rem;">退费原因：</div>
                <div class="value">毕业\离园</div>
              </el-row>
              <el-row :gutter="10" class="from_row">
                <div class="key">退款方式：</div>
                <div class="radio_group value">
                  <label class="radio" v-for="(item, index) in payType">
                    <!-- :class="item.value == payMode ? 'radio_active' : ''" -->
                    <span class="radio_circle"></span>
                    <span class="radio_name">{{ item.name }}</span>
                  </label>
                </div>
              </el-row>
              <el-row :gutter="10" class="from_row">
                <div class="key">收款人信息：</div>
                <div class="value">
                  <el-input style="width:1.4rem;" clearable v-model="value" placeholder="收款人姓名"></el-input>
                  <el-input style="width:2rem;" clearable v-model="value" placeholder="联系方式"></el-input>
                </div>
              </el-row>
            </div>
          </div>
        </div>
        <div class="btn_div">
          <div class="btn_cancel" @click="cancel()">取消</div>
          <div class="btn_sure" @click="sure()">确定收费</div>
        </div>
      </div>
    </div>
    <el-dialog
      title="退费成功"
      :visible.sync="dialog_success"
      width="60%"
      center=""
      :close-on-click-modal="false"
    >
      <div class="confirm_box">
        <el-row :gutter="10" class="confirm_info">
          <el-col :span="6">学员姓名：赵乐乐</el-col>
          <el-col :span="6">监护人：罗琴</el-col>
          <el-col :span="8">联系电话：18000000000</el-col>
        </el-row>
        <el-row :gutter="10" class="confirm_info">
          <el-col :span="6">收款人：罗琴</el-col>
          <el-col :span="8">收款人电话：18000000000</el-col>
        </el-row>
        <div class="confirm_payInfo">
          <div class="confirm_payInfo_table">
            <div class="table">
              <div class="thead">
                <div style="width: 1.2rem;">退费项目</div>
                <div style="width: 1.5rem;">收费标准</div>
                <div style="width: 1rem;">购买月数</div>
                <div style="width: 1.2rem;">应收总计</div>
                <div style="width: 1rem;">折扣</div>
                <div style="width: 1.2rem;">实际收款</div>
                <div style="width: 1.1rem;">符合退款(天)</div>
                <div style="width: 1.2rem;">应退费</div>
                <div style="width: 1.2rem;">实际退费</div>
              </div>
              <div class="tr_div">
                <div class="tr">
                  <div style="width: 1.2rem;">学费</div>
                  <div style="width: 1.5rem;">标准【2000/月】</div>
                  <div style="width: 1rem;">1</div>
                  <div style="width: 1.2rem;">￥2200.00</div>
                  <div style="width: 1rem;">无</div>
                  <div style="width: 1.2rem;">￥2000.00</div>
                  <div style="width: 1.1rem;">10</div>
                  <div style="width: 1.2rem;">￥1000.00</div>
                  <div style="width: 1.2rem;">￥2000.00</div>
                </div>
                <div class="tr">
                  <div style="width: 1.2rem;">餐费</div>
                  <div style="width: 1.5rem;">标准【200/月】</div>
                  <div style="width: 1rem;">1</div>
                  <div style="width: 1.2rem;">￥440.00</div>
                  <div style="width: 1rem;">无</div>
                  <div style="width: 1.2rem;">￥440.00</div>
                  <div style="width: 1.1rem;">10</div>
                  <div style="width: 1.2rem;">￥200.00</div>
                  <div style="width: 1.2rem;">￥200.00</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="margin-top:0.1rem;text-align:right;margin-right:0.2rem;font-size:0.16rem;"
      >实际退款总计：￥1200.00</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
var vm, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: true,
      payType: [],
      value: "",
      dialog_success: false
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
    },
    sure() {
      vm.dialog_success = true;
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.isAdd = true;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dict = tool.getItem(lsKey.dict, true);
    vm.payType = dict["pay_mode"];
  }
};
</script>
<style lang="scss">
.refundAddMoneyContainer {
  .confirm_box {
    color: #666666;
    font-size: 0.16rem;
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    overflow: hidden;
    .confirm_info {
      margin-bottom: 0.2rem;
      width: 70%;
    }
    .confirm_chargInfo {
      overflow: hidden;
      .confirm_chargInfo_row {
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        width: 70%;
      }
      .key {
        .redStar {
          color: red;
        }
        float: left;
        margin-right: 0.1rem;
        width: 1.14rem;
        padding-top: 0.06rem;
        text-align: right;
      }
      .value {
        padding-top: 0.06rem;
        width: 2rem;
        float: left;
      }
    }
    .confirm_payInfo {
      margin-top: 0.1rem;
      .confirm_payInfo_table {
        margin-top: 0.1rem;
        overflow: hidden;
        .no_work {
          text-decoration: underline;
          color: red;
          cursor: pointer;
        }
        .table {
          border-radius: 0.05rem;
          font-size: 0.16rem;
          letter-spacing: 0;
        }
        .thead {
          height: 0.5rem;
          line-height: 0.49rem;
          font-weight: bold;
          color: #939399;
          background: #e4e5e7;
        }
        .thead > div,
        .tr > div {
          float: left;
          height: 0.49rem;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
        }
        .tbody {
          min-height: 0.5rem;
          max-height: 2.99rem;
          overflow-y: auto;
          overflow-x: hidden;
        }
        .tbody::-webkit-scrollbar {
          width: 0.03rem;
          height: 0;
        }
        .tbody::-webkit-scrollbar-thumb {
          border-radius: 0.03rem;
          background: #3885f8;
        }
        .tr {
          height: 0.5rem;
          line-height: 0.49rem;
          color: #333333;
        }
        .tr_add {
          text-decoration: underline;
          color: #409eff;
          cursor: pointer;
        }
        .table .tr_div:last-child .tr {
          /*border-bottom: 0.01rem solid white;*/
          border-bottom: none;
        }
        .btn_add,
        .btn_reduce {
          display: inline-block;
          width: 0.25rem;
          height: 0.25rem;
          line-height: 0.25rem;
          margin-top: 0.11rem;
          /*float: left;*/
          /*outline: 1px solid red;*/
          font-size: 0.2rem;
          color: #3885f8;
          cursor: pointer;
          user-select: none;
        }
        .btn_reduce {
          /*margin-left: 0.3rem;*/
        }
        .buy_num {
          display: inline-block;
          min-width: 0.4rem;
          /*float: left;*/
          /*outline: 1px solid red;*/
          color: #3885f8;
        }
        .btn_del {
          /*outline: 1px solid red;*/
          width: 0.6rem;
          height: 0.25rem;
          line-height: 0.25rem;
          margin: 0.12rem auto 0 auto;
          text-align: left;
          padding-left: 0.22rem;
          color: #3885f8;
          background-image: url(~@/assets/img/clue_manage/enroll_del.png);
          background-size: 0.18rem;
          background-repeat: no-repeat;
          background-position: left center;
          cursor: pointer;
        }
        .compute {
          position: relative;
          line-height: 0.48rem;
          height: 0.48rem;
          text-align: center;
          color: #333333;
          font-size: 0.16rem;
        }
        .compute_money {
          position: absolute;
          width: 2rem;
          height: 0.48rem;
          right: 0.3rem;
          top: 0;
          text-align: right;
          font-weight: bold;
          color: #3885f8;
          /*outline: 1px solid blue;*/
        }
      }
      .pay_type {
        margin-top: 0.4rem;
        overflow: hidden;
        .count {
          padding: 0.1rem 0.1rem 0.1rem 0;
          /*margin-bottom: 0.05rem;*/
          text-align: right;
          line-height: 0.3rem;
          color: #333333;
          font-size: 0.18rem;
          border-bottom: 0.01rem solid #f3f6fc;
          overflow: hidden;
        }

        .count > div {
          float: right;
        }

        .reduce {
          font-size: 0.16rem;
          cursor: pointer;
        }

        .earnest {
          font-size: 0.16rem;
          cursor: pointer;
          /*margin-bottom: 0.08rem;*/
        }

        .earnest_check {
          display: inline-block;
          vertical-align: middle;
          width: 0.25rem;
          height: 0.25rem;
          background-size: 0.16rem;
          background-repeat: no-repeat;
          background-position: center;
          background-image: url(~@/assets/img/clue_manage/check_no.png);
          position: relative;
          bottom: 0.01rem;
        }

        .earnest_check_active {
          background-image: url(~@/assets/img/clue_manage/check_yes.png);
        }

        .real_money {
          padding-top: 0.08rem;
        }

        .real_money > span {
          font-size: 0.26rem;
          color: #fc7301;
        }

        .title_sub {
          font-size: 0.22rem;
          color: #333333;
          line-height: 0.6rem;
        }

        .title_sub span {
          display: inline-block;
          color: red;
          width: 0.2rem;
          position: relative;
          top: 0.02rem;
        }

        .row {
          margin-bottom: 0.1rem;
        }

        .label_2 {
          display: inline-block;
          width: 0.5rem;
          font-size: 0.16rem;
          color: #666666;
          height: 0.6rem;
        }
        .from_row {
          margin-bottom: 0.1rem;
        }
        .key {
          .redStar {
            color: red;
          }
          float: left;
          margin-right: 0.12rem;
          width: 1.14rem;
          padding-top: 0.04rem;
          text-align: right;
        }
        .value {
          float: left;
        }
        .radio_group {
          color: #333333;
          font-size: 0.18rem;
          padding-left: 0.2rem;
          padding-bottom: 0.05rem;
        }

        .radio_circle {
          top: 0.01rem;
        }
      }
    }
  }
}
</style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
</style>





